// 导入Vue构造函数
import Vue from 'vue'
// 导入Vuex构造函数
import Vuex from 'vuex'
import getters from './getters'
// 导入子模块
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import router from './modules/router'
import tagsView from './modules/tagsView'
// 导入让vuex数据持久化插件
import createPersisitedStatel from 'vuex-persistedstate'
Vue.use(Vuex)

const store = new Vuex.Store({
  // 注册三个子模块(采用对象简写)
  modules: {
    app,
    settings,
    user,
    router,
    tagsView
  },
  getters,
  plugins: [
    // 使用让 vuex 数据持久化的插件，传入配置
    createPersisitedStatel({
      // 本地存储键名 -> localstorage.setItem('hrsass-23'，vuex下的state数据)key:"hrsass-23
      key: 'ihrror-人力资源管理系统',
      // 哪些模块下的数据需要持久化
      // 使用这个插件的好处:
      // 1，自动把vuex中的数据同步到localstorage一份
      // 2.当我们刷新页面的时候，自动的把Lpcalstorage的数据赋值给vuex中的数据
      // 3，每当vuex中的数据发生变了，也会自动地把最新的vuex数据同步到localstorage
      // 数据的使用方式:
      // 1.代码中，我们都是从vuex中做数据做增删改查 (只用vuex中的数据)
      // 2.localstorage只负责刷新数据不丢失的任务1
      // paths: ['app', 'settings', 'user']
      paths: ['app', 'settings']
    })
  ]
})

export default store

// token为什么同时用vuex和本地存储共同管理?

// 存储在vuex中数据的优点和缺点
// 优点:
// 1，响应式
// 2.读写速度快
// 缺点:    刷新会丢失

// 存储在Localstorage中数据的优点和缺点
// 优点:  刷新不丢失
// 缺点:   1.非响应式   2.读写速度慢（从磁盘中读取，IO-读取文件）
